<template>
  <div id="app">
    <el-container>
      <!-- 顶部导航栏 -->
      <el-header height="50px">
        <div class="header-container" >
          <div class="left-section" >
            <div class="logo">ERP&MES</div>
            <el-menu 
              :default-active="activeIndex" 
              mode="horizontal" 
              background-color="#0052CC"
              text-color="#fff"
              active-text-color="#ffd04b"
              
              @select="handleSelect"
            >
              <el-menu-item index="1">订单</el-menu-item>
              <el-menu-item index="2">库存</el-menu-item>
              <el-menu-item index="3">财务</el-menu-item>
              <el-menu-item index="4">往来客户</el-menu-item>
              <el-menu-item index="5">项目</el-menu-item>
              <el-menu-item index="6">审批</el-menu-item>
              <el-menu-item index="7">系统</el-menu-item>
            </el-menu>
          </div>
          
          <div class="right-section">
            <el-input
              placeholder="搜索"
              prefix-icon="el-icon-search"
              size="small"
              style="width: 200px; margin-right: 20px;"
            />
            <el-button icon="el-icon-bell" circle></el-button>
            <el-avatar size="small" icon="el-icon-user"></el-avatar>
            <span class="username">Admin</span>
            <el-button icon="el-icon-menu" circle></el-button>
          </div>
        </div>
      </el-header>

      <!-- 主要内容区域 -->
      <el-main class="main-content">
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      activeIndex: '7',
      orderNum:''
    }
  },
  methods: {
    handleSelect(key) {
      if (key === '1') { // 订单
        this.$router.push('/order').catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            throw err;
          }
        });
      }
      if (key === '2') { // 库存
        this.$router.push('/inventory').catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            throw err;
          }
        });
      }
      if (key === '3') { // 财务
        this.$router.push('/finance').catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            throw err;
          }
        });
      }
      if (key === '4') { // 往来客户
        this.$router.push('/customer').catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            throw err;
          }
        });
      }
      if (key === '5') { // 项目
        this.$router.push('/project').catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            throw err;
          }
        });
      }
      if (key === '6') { // 审批
        this.$router.push('/approval').catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            throw err;
          }
        });
      }
      if (key === '7') { // 系统
        this.$router.push('/system').catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            throw err;
          }
        });
      }
    },
    function() {
      var ws = new WebSocket('ws://localhost:8020/webSocket/1'); // 确保使用正确的URL和端口

      ws.onopen = function () {
        
        console.log('WebSocket连接已打开');
        // 可以在这里发送消息
        ws.send('Hello Server!');
      };

      ws.onmessage = (event) => {
         // 将接收到的消息更新到Vue的数据属性中
        console.log('收到消息：' + event.data);
        this.orderNum = event.data
        this.open1()
      };

      ws.onclose = function () {
        console.log('WebSocket连接已关闭');
      };

      ws.onerror = function (error) {
        console.log('WebSocket错误:' + error);
      };


    },
    open1() {
        const h = this.$createElement;

        this.$notify({
          title: '提醒',
          message: h('i', { style: 'color: teal'}, this.orderNum+'超时未处理')
        });
      },
  },
  created(){
    this.function()
  }
}
</script>

<style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#app {
  height: 100%;
}

.el-container {
  height: 100%;
}

.el-header {
  background-color: #0052CC;
  padding: 0;
  color: #fff;
  height: 45px ;
}

.header-container {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}

.left-section {
  display: flex;
  align-items: center;
}

.logo {
  font-size: 18px;
  font-weight: bold;
  margin-right: 10px;
  color: #fff;
}

.right-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.username {
  color: #fff;
  margin: 0 5px;
}

/* 覆盖 Element UI 的默认样式 */
.el-menu.el-menu--horizontal {
  border-bottom: none;
  background-color: transparent;
}

.el-menu--horizontal > .el-menu-item {
  height: 40px;
  line-height: 40px;
  border-bottom: none;
  padding: 0 12px;
  font-size: 14px;
}

.el-menu--horizontal > .el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 2px solid #ffd04b;
  color: #ffd04b;
}

.el-main {
  padding: 0;
  background-color: #f0f2f5;
}

.right-section .el-input {
  width: 180px !important;
  margin-right: 10px !important;
}

.right-section .el-button.is-circle {
  padding: 8px;
}

.right-section .el-avatar--small {
  --el-avatar-size: 28px;
}

/* 添加主内容区域的居中样式 */
.main-content {
  padding: 0;
  background-color: #f0f2f5;
  display: flex;
  align-items: center;  /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  min-height: calc(100vh - 50px); /* 减去头部高度 */
}

/* 确保路由视图占满容器 */
.main-content > * {
  width: 100%;
  height: 100%;
}
</style>
